<template>
  <div class="app-container">
    <h1 class="app-title">Lee Ui 常用组件库</h1>
    <nav class="app-nav">
      <router-link to="/">Icon</router-link>
      <router-link to="/button">Button</router-link>
      <router-link to="/input">Input</router-link>
      <router-link to="/card">Card</router-link>
      <router-link to="/dialog">Dialog</router-link>
      <router-link to="/pager">Pager</router-link>
      <router-link to="/collapse">Collapse</router-link>
      <router-link to="/tooltip">Tooltip</router-link>
      <router-link to="/dropdown">Dropdown</router-link>
    </nav>
    <div class="app-area">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .app-title {
    text-align: center;
    font-weight: 200;
  }
  .app-nav {
    display: flex;
    height: 50px;
    justify-content: space-evenly;
    align-items: center;
  }
  .app-area {
    margin-top: 3em;
  }
  .app-active {
    border-bottom: 1px solid;
  }
}
</style>
